import { ArrowRight, Download, Plus, Send } from 'lucide-react';
import Button from '../components/Button';

const ButtonShowcase = () => {
  return (
    <div className="min-h-screen bg-gray-50 py-12">
      <div className="container mx-auto px-4 max-w-6xl">
        <div className="text-center mb-12">
          <h1 className="text-4xl font-bold text-[#0f1c3f] mb-4">
            按钮组件展示
          </h1>
          <p className="text-lg text-gray-600">
            查看所有按钮变体和尺寸
          </p>
        </div>

        {/* Default Variant */}
        <section className="bg-white rounded-xl shadow-sm p-8 mb-8">
          <h2 className="text-2xl font-bold text-[#0f1c3f] mb-6">
            默认变体 (Default)
          </h2>
          <div className="flex flex-wrap items-center gap-4">
            <Button size="sm">小尺寸按钮</Button>
            <Button size="default">默认尺寸按钮</Button>
            <Button size="lg">大尺寸按钮</Button>
            <Button size="lg">
              带图标 <ArrowRight className="ml-2" size={18} />
            </Button>
          </div>
        </section>

        {/* Gradient Variant */}
        <section className="bg-white rounded-xl shadow-sm p-8 mb-8">
          <h2 className="text-2xl font-bold text-[#0f1c3f] mb-6">
            渐变变体 (Gradient)
          </h2>
          <div className="flex flex-wrap items-center gap-4">
            <Button variant="gradient" size="sm">小尺寸渐变</Button>
            <Button variant="gradient" size="default">默认尺寸渐变</Button>
            <Button variant="gradient" size="lg">大尺寸渐变</Button>
            <Button variant="gradient" size="lg">
              <Download className="mr-2" size={18} />
              下载文件
            </Button>
          </div>
        </section>

        {/* Outline Variant */}
        <section className="bg-white rounded-xl shadow-sm p-8 mb-8">
          <h2 className="text-2xl font-bold text-[#0f1c3f] mb-6">
            轮廓变体 (Outline)
          </h2>
          <div className="flex flex-wrap items-center gap-4">
            <Button variant="outline" size="sm">小尺寸轮廓</Button>
            <Button variant="outline" size="default">默认尺寸轮廓</Button>
            <Button variant="outline" size="lg">大尺寸轮廓</Button>
            <Button variant="outline" size="lg">
              <Plus className="mr-2" size={18} />
              添加项目
            </Button>
          </div>
        </section>

        {/* Ghost Variant */}
        <section className="bg-white rounded-xl shadow-sm p-8 mb-8">
          <h2 className="text-2xl font-bold text-[#0f1c3f] mb-6">
            幽灵变体 (Ghost)
          </h2>
          <div className="flex flex-wrap items-center gap-4">
            <Button variant="ghost" size="sm">小尺寸幽灵</Button>
            <Button variant="ghost" size="default">默认尺寸幽灵</Button>
            <Button variant="ghost" size="lg">大尺寸幽灵</Button>
            <Button variant="ghost" size="lg">
              <Send className="mr-2" size={18} />
              发送消息
            </Button>
          </div>
        </section>

        {/* Full Width */}
        <section className="bg-white rounded-xl shadow-sm p-8 mb-8">
          <h2 className="text-2xl font-bold text-[#0f1c3f] mb-6">
            全宽按钮 (Full Width)
          </h2>
          <div className="space-y-4">
            <Button fullWidth variant="gradient">
              全宽渐变按钮
            </Button>
            <Button fullWidth variant="default">
              全宽默认按钮
            </Button>
            <Button fullWidth variant="outline">
              全宽轮廓按钮
            </Button>
            <Button fullWidth variant="ghost">
              全宽幽灵按钮
            </Button>
          </div>
        </section>

        {/* Disabled State */}
        <section className="bg-white rounded-xl shadow-sm p-8 mb-8">
          <h2 className="text-2xl font-bold text-[#0f1c3f] mb-6">
            禁用状态 (Disabled)
          </h2>
          <div className="flex flex-wrap items-center gap-4">
            <Button disabled>禁用默认</Button>
            <Button variant="gradient" disabled>禁用渐变</Button>
            <Button variant="outline" disabled>禁用轮廓</Button>
            <Button variant="ghost" disabled>禁用幽灵</Button>
          </div>
        </section>

        {/* Button Groups */}
        <section className="bg-white rounded-xl shadow-sm p-8 mb-8">
          <h2 className="text-2xl font-bold text-[#0f1c3f] mb-6">
            按钮组合示例
          </h2>
          <div className="space-y-6">
            <div className="flex flex-wrap gap-3">
              <Button variant="gradient">
                确认
              </Button>
              <Button variant="outline">
                取消
              </Button>
            </div>
            <div className="flex flex-wrap gap-3">
              <Button variant="default">
                <Download className="mr-2" size={18} />
                下载
              </Button>
              <Button variant="ghost">
                预览
              </Button>
              <Button variant="outline">
                分享
              </Button>
            </div>
            <div className="flex flex-col sm:flex-row gap-3 justify-center">
              <Button variant="gradient" size="lg" className="min-w-[160px]">
                立即开始
              </Button>
              <Button variant="outline" size="lg" className="min-w-[160px]">
                了解更多
              </Button>
            </div>
          </div>
        </section>

        {/* Dark Background Examples */}
        <section className="bg-[#0f1c3f] rounded-xl shadow-sm p-8 mb-8">
          <h2 className="text-2xl font-bold text-white mb-6">
            深色背景上的按钮
          </h2>
          <div className="flex flex-wrap items-center gap-4">
            <Button 
              variant="default" 
              className="bg-white text-[#0f1c3f] hover:bg-gray-100"
            >
              白色按钮
            </Button>
            <Button variant="outline" className="border-white text-white hover:bg-white hover:text-[#0f1c3f]">
              白色轮廓
            </Button>
            <Button variant="gradient">
              渐变按钮
            </Button>
            <Button variant="ghost" className="text-white hover:bg-white/10">
              幽灵按钮
            </Button>
          </div>
        </section>
      </div>
    </div>
  );
};

export default ButtonShowcase;
